<script setup lang="ts">
import { onUnmounted } from 'vue'

import { imagePath, maskStyle } from '@/libs/file-utils'
import { showUnlockMask, payItem, selectIdx, countDownStr, confirm, clear } from './data'
import { inviteCount, totalCount } from '../data'

const img_bg = imagePath('quiz/mbti/result/unlock-mask/bg.png')
const icon_close = imagePath('icon-close.svg')

onUnmounted(clear)
</script>

<template>
  <MaskWrapper v-model:show="showUnlockMask">
    <div
      class="unlock-mask"
      :class="{ active: showUnlockMask }"
      :style="{ backgroundImage: img_bg }"
      @click.stop=""
    >
      <div
        class="close"
        :style="maskStyle(icon_close)"
        @click="showUnlockMask = false"
      ></div>

      <div class="title">报告限时优惠 <span class="val">{{ countDownStr }}</span> 后恢复原价</div>

      <div class="list">
        <div
          v-for="(item, idx) in payItem?.itemList"
          :key="idx"
          class="item"
          :class="{ active: selectIdx === idx }"
          @click="selectIdx = idx"
        >
          <div class="name">{{ item.itemName }}</div>
          <div class="price">
            <div>
              ￥{{ item.price }}
              <div
                class="ori"
                :style="{ opacity: payItem?.countDown !== 0 ? 1 : 0 }"
              >￥{{ item.originalPrice }}</div>
            </div>

            <template v-if="item.inviteDesc">
              <div class="divider"></div>
              <div class="invite">或 {{ item.inviteDesc }}</div>
            </template>
          </div>
          <div class="desc">{{ item.itemDesc }}</div>
        </div>
      </div>

      <div
        class="btns"
        :class="{ show: selectIdx != -1 }"
      >
        <!-- #ifdef WEB || APP -->
        <div
          v-if="payItem?.itemList[selectIdx]?.supportInvite"
          class="share"
        >邀请好友（{{ inviteCount }}/{{ totalCount }}）</div>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <button
          v-if="payItem?.itemList[selectIdx]?.supportInvite"
          class="share"
          open-type="share"
        >邀请好友（{{ inviteCount }}/{{ totalCount }}）</button>
        <!-- #endif -->
        <div
          class="confirm"
          @click="confirm"
        >立即解锁</div>
      </div>

      <div class="count">已有{{ payItem?.unlockCount }}人解锁</div>
    </div>
  </MaskWrapper>
</template>

<style lang="less" scoped>
.unlock-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);

  width: 750rpx;

  box-sizing: border-box;
  padding: 48rpx 32rpx 76rpx;
  border-radius: 32rpx 32rpx 0 0;

  background-color: #fff;
  background-size: 750rpx 280rpx;
  background-position: center top;
  background-repeat: no-repeat;

  transition: transform .3s;

  z-index: 2;

  &.active {
    transform: translateY(0);
  }

  .close {
    position: absolute;
    top: 26rpx;
    right: 42rpx;

    width: 44rpx;
    height: 44rpx;

    background-color: rgba(#000, .62);
    mask-size: 100% 100%;
  }

  .title {
    width: 530rpx;
    color: #340E34;
    font-size: 40rpx;
    line-height: 60rpx;

    .val {
      color: #F00;
      font-size: 64rpx;
    }
  }

  // .tip {
  //   margin-top: 16rpx;

  //   color: #888;
  //   font-size: 24rpx;
  //   line-height: 24rpx;

  //   .val {
  //     color: #F00;
  //   }
  // }

  .list {
    margin-top: 40rpx;

    display: flex;
    gap: 16rpx;

    .item {
      flex: 1;

      box-sizing: border-box;
      padding: 28rpx 15rpx;
      border: 2rpx solid rgba(0, 0, 0, 0.19);
      border-radius: 16rpx;

      transition: .3s;

      &.active {
        background-color: rgba(245, 174, 87, .12);
        border-color: rgba(240, 92, 0, .25);
      }

      .name {
        color: #444;
        text-align: center;
        font-size: 28rpx;
        line-height: 28rpx;
      }

      .price {
        position: relative;

        margin-top: 16rpx;

        color: #000;
        font-size: 40rpx;
        line-height: 40rpx;

        display: flex;
        align-items: flex-end;

        .ori {
          color: #808080;
          font-size: 20rpx;
          line-height: 24rpx;
          text-decoration: line-through;
        }

        .divider {
          transform: rotateZ(30deg);

          width: 2rpx;
          height: 60rpx;

          margin: 0 10rpx;

          background-color: #000;
        }

        .invite {
          color: #222;
          font-size: 20rpx;
          line-height: 24rpx;
          white-space: nowrap;
        }
      }

      .desc {
        margin-top: 16rpx;

        color: #888;
        font-size: 24rpx;
        line-height: 34rpx;
        white-space: pre-wrap;
      }
    }
  }

  .btns {
    height: 0;

    margin-top: 32rpx;

    display: flex;

    overflow: hidden;

    transition: height .3s;

    &.show {
      height: 74rpx;
    }

    .share {
      width: 300rpx;
      height: 74rpx;

      margin-right: 18rpx;

      border-radius: 59rpx;
      background-color: #F48A9A;
      box-shadow: -6rpx -6rpx 13rpx 0 rgba(240, 48, 0, .25) inset, 0 4rpx 5rpx 0 rgba(97, 15, 101, .28);

      color: #fff;
      font-size: 32rpx;
      line-height: 74rpx;
      text-align: center;

      &::after {
        border: none;
      }
    }

    .confirm {
      flex: 1;
      height: 74rpx;

      border-radius: 59rpx;
      background-color: #07C160;
      box-shadow: -6rpx -6rpx 13rpx 0 rgba(240, 48, 0, .25) inset, 0 4rpx 5rpx 0 rgba(15, 101, 25, 0.28);

      color: #fff;
      font-size: 32rpx;
      line-height: 74rpx;
      text-align: center;
    }
  }

  .count {
    margin-top: 32rpx;

    color: #999;
    font-size: 28rpx;
    line-height: 32rpx;
    text-align: center;
  }
}
</style>